<template>
    <div class="">
      <!-- <el-switch v-model="value1"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch>
      <el-switch v-model="value2"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch>
      <el-switch v-model="value3"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch> -->

      <!-- <el-switch v-model="tableDate[0].value"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch>
      <el-switch v-model="tableDate[1].value"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch>
      <el-switch v-model="tableDate[2].value"
       active-color='green'
       inactive-color='#ddd'
      >
      </el-switch> -->

      <el-switch
       :key='item.id'
       active-color='green'
       inactive-color='#ddd'
       v-for='(item) in tableDate'
       v-model="item.value"
       @change='handleChange'
      >
      </el-switch>
      
      
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data:function(){
    return {
      tableDate:[
        {
          id:1,
          title:'首页',
          value:true
        },
        {
          id:2,
          title:'产品',
          value:false
        },
        {
          id:3,
          title:'公司介绍',
          value:true
        },
      ],
      // value:true //布尔值
      // value1:true,
      // value2:true,
      // value3:true,
    }
  },
  methods:{
    handleChange:function(value){
      console.log(value);
    }

  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<style lang='less' scoped>



</style>
